<template>
  <el-table
    size="small"
    :data="goodsData"
    border
    fit
    highlight-current-row
  >
    <el-table-column
      prop="goodsNo"
      align="center"
      width="150"
      show-overflow-tooltip
      label="货品编码"
    />
    <el-table-column
      prop="goodsName"
      header-align="center"
      show-overflow-tooltip
      label="货品名称"
      width="150"
    />
    <el-table-column
      prop="picUrl"
      header-align="center"
      label="货品图片"
      width="100"
      align="center"
    >
      <template slot-scope="scope">
        <viewer
          :key="$downPath + scope.row.picUrl"
          class="Centered"
          :options="vieweroptions"
        >
          <img
            v-if="scope.row.picUrl"
            :key="$downPath + scope.row.picUrl"
            v-lazy="$downPath + scope.row.picUrl"
            class="avatar"
            :src="$downPath + scope.row.picUrl"
            width="40"
          >
        </viewer>
      </template>
    </el-table-column>
    <el-table-column
      prop="propertyOptionsName"
      header-align="center"
      show-overflow-tooltip
      label="状态"
    >
      <template slot-scope="scope">
        {{ scope.row.refundStatus | filterRefundStatus }}
      </template>
    </el-table-column>
    <el-table-column
      prop="propertyOptionsName"
      header-align="center"
      width="150"
      show-overflow-tooltip
      label="属性选项名称"
    >
      <template slot-scope="scope">
        <el-tag
          v-for="(item, index) in scope.row.goodsItemsPropertyOptionEx"
          :key="index"
          style="margin-right: 5px"
          type="primary"
        >{{ item.propertyName }}<i class="el-icon-paperclip" />{{
          item.optionValue
        }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="num"
      width="70"
      label="数量"
    />
    <el-table-column
      header-align="center"
      align="right"
      prop="price"
      width="70"
      label="单价"
    />
    <el-table-column
      prop="remark"
      label="备注"
      width="150"
      show-overflow-tooltip
      header-align="center"
    />
  </el-table>
</template>
<script>
export default {
  name: 'Ordergoods',
  filters: {
    filterRefundStatus(code) {
      // 退款状态0无退款1取消退款,2已申请退款,3等待退货,4等待收货,5退款成功
      switch (code) {
        case 1:
          return '取消退款'
        case 2:
          return '已申请退款'
        case 3:
          return '等待退货'
        case 4:
          return '等待收货'
        case 5:
          return '退款成功'
        default:
          return '无退款'
      }
    }
  },
  props: {
    goodsData: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: undefined
    }
  },
  data: () => ({
    vieweroptions: { zIndex: 5000 }
  }),
  methods: {
  }
}
</script>
